<template>
  <view class="container">
    <div class="username-info">
      <view class="username-box">
        <input
          type="text"
          class="username-input"
          placeholder="请输入昵称"
          :value="userInfo.nick_name"
          @input="inputChange"
          @focus="isFocus = true"
          @blur="isFocus = false"
        />
        <div class="input-icon" v-show="isFocus" @click="clearNick">
          <span class="iconfont icon-guanbi-"></span>
        </div>
      </view>
      <div class="username-tip">
        英文字母或汉字，限4-16个字符，一个汉字为2个字符
      </div>
    </div>
    <!-- 保存 -->
    <view class="saveNick" @click="saveNick">
      <span>保存</span>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
const { changeUsersInfo, getUserInfo } = require("../../api/user/setting");
export default {
  props: {},
  components: {},
  data() {
    return {
      isFocus: false,
      username: "",
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  watch: {},
  methods: {
    ...mapMutations(["editUserInfo"]),

    inputChange(e) {
      this.username = e.detail.value;
      if (e.detail.value.length > 0) {
        this.isFocus = true;
      } else {
        this.isFocus = false;
      }
    },
    clearNick() {
      this.username = "";
      this.isFocus = false;
    },
    // 获取用户数据
    getData() {
      let openid = uni.getStorageSync("openId");
      if (!openid) return;

      // 获取用户数据
      getUserInfo({ openid }).then(res => {
        this.username = res.nick_name;
      });
    },
    // 保存昵称
    saveNick() {
      if (this.username.trim() == "")
        return uni.showToast({ title: "请输入昵称", icon: "none" });
      // 验证昵称
      if (!this.validation(this.username))
        return uni.showToast({ title: "请输入正确的昵称", icon: "none" });

      let openid = uni.getStorageSync("openId");
      let nick_name = this.username;
      changeUsersInfo({ openid, nick_name }).then(
        res => {
          // 获取用户数据
          getUserInfo({ openid }).then(res => {
            this.editUserInfo(res);
          });
          uni.navigateBack({
            delta: 1,
          });
        },
        err => {
          uni.showToast({ title: err, icon: "none" });
        }
      );
    },

    // 昵称验证
    validation(str) {
      var len = 0;
      var patt = /^[a-zA-z\u4e00-\u9fa5]+$/;

      for (var i = 0; i < str.length; i++) {
        str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94 ? (len += 2) : len++;
        // 当字符长度超过16 or 不符合正则
        if (len > 16 || !patt.test(str)) {
          return false;
        }
      }
      return true;
    },
  },
  created() {
    this.getData();
    this.username = this.userInfo.nick_name;
  },
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.username-info {
  margin-top: 20rpx;
  padding: 44rpx 40rpx;
  background-color: #fff;

  .username-box {
    display: flex;
    justify-content: space-between;
    border-bottom: 2rpx solid #f2f2f2;

    .username-input {
      flex: 1;
      padding-bottom: 44rpx;
    }

    .input-icon {
      position: relative;
      width: 32rpx;
      height: 32rpx;
      color: #cccccc;
      z-index: 10;
    }
  }
  .username-tip {
    padding-top: 40rpx;
    padding-bottom: 10rpx;
    font-size: 24rpx;
    color: #cccccc;
  }
}
.saveNick {
  position: absolute;
  left: 0;
  bottom: 20rpx;
  width: 100%;
  padding: 0 30rpx;
  font-size: 28rpx;

  span {
    display: inline-block;
    width: 100%;
    height: 88rpx;
    background-color: #666ee8;
    line-height: 88rpx;
    text-align: center;
    color: white;
  }
}
</style>
